<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>活动时钟</title>
    <style>
        * {
            padding: 0px;
            margin: 0px;
            background-color: #ccc;
        }

        .content {
            width: 400px;
            height: 400px;
            border-radius: 50%;
            background-color: #fff;
            position: absolute;
            top: 100px;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
            position: relative;
        }

        .nei {
            width: 340px;
            height: 340px;
            background-color: #ccc;
            border-radius: 50%;
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
        }

        .yuan {
            width: 20px;
            height: 20px;
            background-color: brown;
            border-radius: 50%;
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
        }


        .hand {
            width: 50%;
            background: #fff;
            position: absolute;
            top: 50%;
            right: 50%;
            box-shadow:
                0 0 0 .1px #fff,
                0 0 0 1px rgba(0, 0, 0, 0.1),
                0 0 8px rgba(0, 0, 0, 0.4),
                2px 5px 1px rgba(0, 0, 0, .5);
            transform-origin: 100% 50%;
            transform: rotate(90deg);
            transition-timing-function: cubic-bezier(0.9, 0.54, 0.26, 1.68);
        }

        .hour-hand {
            width: 40%;
            height: 10px;
            margin-top: -5px;
            border-bottom-left-radius: .5em;
            border-top-left-radius: .5em;
            transition: all 3s;
        }

        .min-hand {
            width: 45%;
            height: 5px;
            margin-top: -2.5px;
            transition: all .1s cubic-bezier(0.9, 0.54, 0.26, 1.68);
        }

        .second-hand {
            height: 2px;
            margin-top: -1px;
            border-bottom-left-radius: 100%;
            border-top-left-radius: 100%;
            transition: all .05s cubic-bezier(0.9, 0.54, 0.26, 1.68);
            background-color: red;
        }
    </style>
</head>

<body>


    <div class="content">

        <div class="nei">
            <div class="hand hour-hand"></div>
            <div class="hand min-hand"></div>
            <div class="hand second-hand"></div>
            <div class="yuan"></div>
        </div>



    </div>

</body>

<script>

    const secHands = document.querySelector(".second-hand")
    const minHands = document.querySelector(".min-hand")
    const hourHands = document.querySelector(".hour-hand")
    
  function setDate(){
      const date = new Date()

        const second = date.getSeconds()
        const minHand = date.getMinutes()
        const hourHand = date.getHours()


        const secondDeg = (90 + (second/60)*360)
        const minHandDeg = (90 + (minHand/60)*360)
        const hourHandDeg = (90 + (hourHand / 12) * 360 + (minHand / 12 / 60) * 360)
        

        // console.log(secondDeg)
        if (secondDeg === 90) secHand.style.transition = 'all 0s';
		else secHands.style.transition = 'all 0.05s cubic-bezier(0.9, 0.54, 0.26, 1.68)';
		if (minHandDeg === 90) minHand.style.transition = 'all 0s';
		else minHands.style.transition = 'all 0.1s cubic-bezier(0.9, 0.54, 0.26, 1.68)';	

        // 

        secHands.style.transform = `rotate(${ secondDeg }deg)`;
        minHands.style.transform = `rotate(${ minHandDeg }deg)`;
        hourHands.style.transform = `rotate(${ hourHandDeg }deg)`;

        // secHand.style.transform = `rotate(${secondDeg})deg`
  }


  setInterval(setDate,1000)

</script>


</html>